<template>
<div class="detail-container">

  <el-row>
      <el-col :span="10">
        <el-row>
          <el-image style="width: 350px; height: 350px" :src="data.url" :fit="fit" />
        </el-row>
        <el-row class="carousel">

          <el-col :span="24">
            <el-carousel :interval="5000" type="card" height="54px">
              <el-carousel-item v-for="item in 6" :key="item">
                <h3 text="2xl" justify="center">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </el-col>

        </el-row>
        <el-row>
            <router-link>
              <StarFilled style="width: 1em; height: 1em; margin-right: 8px;color:red;" /> 关注
            </router-link>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-row>
          <h3>狗够1</h3>
        </el-row>
        <el-row>
           <div class="slogan">
                二手-宠物之家
           </div>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="info">
              <div>
                昵称
              </div>
              <div>
                性别
              </div>
              <div>
                年龄
              </div>
            </el-card>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="tag-box">
              <el-tag    type="info">Tag 1</el-tag>
              <el-tag type="success">Tag 2</el-tag>
              <el-tag type="success">Tag 3</el-tag>

            </div>
          </el-col>

        </el-row>
        <el-row>
            <el-button class="lg-button" type="primary" @click="adoptClick">收养</el-button>
        </el-row>
      </el-col>
      <el-col :span="4">

      </el-col>
  </el-row>
  <el-row :gutter="50" class="margin-20">
    <el-col :span="10">

      <div class="left-part">

      </div>

    </el-col>

<el-col :span="14"  >
  <el-tabs v-model="data.activeName"  type="border-card" >
    <el-tab-pane label="基本信息" name="first">基本信息</el-tab-pane>
    <el-tab-pane label="健康状态" name="second">健康状态</el-tab-pane>
    <el-tab-pane label="规格包装" name="third">规格包装</el-tab-pane>
  </el-tabs>
</el-col>
  </el-row>

</div>


  <el-dialog v-model="data.adopt.show">

     <template #header>
         宠物领样
     </template>

    <el-divider></el-divider>
    <el-card>
        <el-row>

           <el-col :span="4">
             <el-image style="width: 60px; height: 60px" :src="data.url" :fit="fit" />

           </el-col>
           <el-col :span="16">

             <el-row>狗子1</el-row>
             <el-row>男狗狗-今年-三岁</el-row>
             <el-row>
                干净-漂亮-多毛-有肌肉
             </el-row>

           </el-col>

        </el-row>

    </el-card>
    <el-card>
       <el-form label-width="90px">

         <el-form-item label="姓名">
           <el-input></el-input>
         </el-form-item>
         <el-form-item label="电话">
           <el-input></el-input>
         </el-form-item>
         <el-form-item label="地址">
           <el-input></el-input>
         </el-form-item>

       </el-form>

    </el-card>
    <el-card class="center">

        <router-link to="">领养协议</router-link>

    <el-checkbox class=""></el-checkbox> 我同意
    </el-card>

    <template #footer>
      <div class="center">
        <el-button type="primary" class="submit-lg">确认领养</el-button>
      </div>

    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {reactive} from "vue";




const data = reactive({
   url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  activeName:'first',
  adopt:{
      show:false
  }
})

let adoptClick =()=>{

   data.adopt.show = true;

}

</script>

<style scoped>

.detail-container{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    /*border: 1px solid;*/

}
.carousel{
   height: 80px;
   width: 350px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

a:link{
   text-decoration: none;
}

.slogan{
    height: 60px;
    width: 100%;
    text-align: left;
    line-height: 60px;
    font-size: large;
    font-weight: bolder;
    color: white;
    background-color: red;
}

.lg-button{
   margin-top: 20px;
   width: 180px;
   height: 60px;
}

.el-card{
    background-color: #edebeb;
     opacity: .7;
}

.el-tabs__content{
   height: 300px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


.info{
    height: 160px;
}

.left-part{
    width: 100%;
     height: 260px;
    border: 1px solid;
}

.margin-20{
   margin-top: 40px;
}


.tag-box{
  margin-top: 15px;
  display: flex;
  gap: 3px;
  flex-direction: row;

}


.tag-box .el-tag{
   width: 100px;
  height: 30px;
}

.el-card{
   margin-bottom: 10px;
}

.el-checkbox{
     margin-left: 20px;
}

.center{
   text-align: center;
}

.submit-lg{
   width: 100%;
}
</style>